<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .map {
            width: 600px;
            height: 600px;
            background-color: #f0f0f0;
            margin: 0 auto;
            position: relative;
        }

        .map .role {
            position: absolute;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>

<body>

    <!-- 
        <div class="map">
            <div class="role"></div>
        </div>
    -->



    <script>
        // 如果数据是一个数组,那么就可以进行添加数据,删除数据这些操作
        // 定义变量 ,记录相关的数据
        var data = [
            { x: 100, y: 100, c: "green", w: 60, h: 60 },
            { x: 200, y: 300, c: "blue", w: 70, h: 70 },
            { x: 400, y: 100, c: "purple", w: 50, h: 70 },
            { x: 500, y: 400, c: "yellowgreen", w: 45, h: 60 }
        ]

        // 问题:
        // 如何取出data中的 "purple" 这个数据 ? 数组嵌套对象的方式
        // data[2].c  //  "purple"
        // data[2].w  // 50

        // 定义函数, 根据数据渲染html字符串
        function template(arr) {
            // html代码字符串
            var str = '<div class="map">';
            // 循环data数组
            for (var i = 0; i < data.length; i++) {
                // 拼接地图中的html代码
                str += '<div style="width:' + data[i].w + 'px;height:' + data[i].h + 'px;background:' + data[i].c + ';left:' + data[i].x + 'px;top:' + data[i].y + 'px;" class="role">' + (i + 1) + '</div>'
            }
            // 拼接html代码字符串
            str += '</div>'
            // 渲染字符串
            document.write(str);
        }



        // 控制数组(删除)
        // data.pop();
        // data.pop();
        // data.pop();
        // data.pop();

        // 添加数据
        // var obj =  { x: 50, y: 400, c: "red", w: 80, h: 50 }
        // data.push(obj);


        // 删除一个元素 ,再添加一个元素
        // var v1 = data.pop();
        // console.log(v1);
        // data.push(v1);

        // 删除第一个元素
        // data.shift();
        // data.shift();
        // data.shift();
        // data.shift();

        // 调用函数, 渲染数据
        template(data);


    </script>
</body>

</html>